<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <title>Exemplo abas html5</title>

  <link href="css/estilo_geral.css?v=1" rel="stylesheet" />

</head>
<body>

  <!-- abre #topo -->
  <div id="topo">
    <h1>Abas em html5</h1>
    <p>Exemplo do plugin para formatação do conteúdo como abas</p>
  </div>
  <!-- fecha #topo -->


  <!-- abre section.abas -->
  <section class="abas">

    <!-- abre #aba-1 -->
    <details id="aba-1" open>
      <summary><a href="#aba-1" title="Ver aba 1">aba 1</a></summary>
      <aside>
        <h2>Modelos de abas padrão com section e details</h2>
        <p>conteúdo aba 1</p>
        <p>conteúdo aba 1</p>
        <p>conteúdo aba 1</p>
        <p>conteúdo aba 1</p>
      </aside>
    </details>
    <!-- fecha #aba-1 -->

    <!-- abre #aba-2 -->
    <details id="aba-2" open>
      <summary><a href="#aba-2" title="Ver aba 2">aba 2</a></summary>
      <aside>
        <p>conteúdo aba 2</p>
        <p>conteúdo aba 2</p>
        <p>conteúdo aba 2</p>
      </aside>
    </details>
    <!-- fecha #aba-1 -->

    <!-- abre #aba-3 -->
    <details id="aba-3" open>
      <summary><a href="#aba-3" title="Ver aba 3">aba 3</a></summary>
      <aside>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
      </aside>
    </details>
    <!-- fecha #aba-3 -->
  
  </section>
  <!-- fecha section.abas -->


  <!-- abre ul.abas -->
  <ul class="abas">

    <li id="aba_lista3">
      <h4><a href="#aba_lista3" title="Ver aba 3">aba 3</a></h4>
      <div class="detalhes">
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
        <p>conteúdo aba 3</p>
      </div>
    </li>

    <li id="aba_lista2">
      <h4><a href="#aba_lista2" title="Ver aba 2">aba 2</a></h4>
      <div class="detalhes">
        <p>conteúdo aba 2</p>
        <p>conteúdo aba 2</p>
        <p>conteúdo aba 2</p>
      </div>
    </li>

    <li id="aba_lista1">
      <h4><a href="#aba_lista1" title="Ver aba 1">aba 1</a></h4>
      <div class="detalhes">
        <h2>Abas com lista, "direção" right</h2>
        <p>conteúdo aba 1</p>
        <p>conteúdo aba 1</p>
        <p>conteúdo aba 1</p>
        <p>conteúdo aba 1</p>
      </div>
    </li>

  </ul>
  <!-- fecha ul.abas -->


<!-- abre scripts finais, visando a melhor performance do site -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="scripts/abas.js"></script>
<script src="scripts/funcionalidades.js"></script>
<!-- fecha scripts finais, visando a melhor performance do site -->

</body>
</html>